<template>
    <div id="app">
        <img src="./img/logo.png" alt="logo" />
        <span>{{msg}}</span>
        <router-link active-class="" exact-active-class="current" to="/">首页</router-link>
        <router-link active-class="" exact-active-class="current" to="/example">例子1</router-link>
        <router-link active-class="" exact-active-class="current" to="/example1">例子2</router-link>
        <router-view></router-view>
        <router-view name="bottom"></router-view>
    </div>
</template>
<script>
import Vue from 'vue';
import './index.less';
export default {
    name: 'app',
    data(){
        return {
            msg: 'hello vue!'
        }
    }
}
</script>
<style scoped>
    .test{
        color: #f0f
    }
</style>
<style lang="less" scoped>
    #app{
        img{width:200px;}
        .current{
            color:blue;
        }
    }
</style>